/**
 * @Description：基于antd Button封装的按钮组件
 * @Author：Answer™
 * @Version：1.0.0
 * @Date：2022年8月12日 10:47:08
 * @LastEditors：Answer™
 * @LastEditTime：2022-8-12 10:48:57
 * @property：type String  按钮类型 primary | success | danger | info | warning | default | link
 * @property：icon String 图标名称
 * @property：plain String 是否镂空
 * @event：
 */
import './style.less'
const yButton = {
  name: 'yButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    icon: String,
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      customClass: 'test'
    }
  },
  render (h) {
    const attrs = Object.assign({}, this.$attrs, this.$props)
    // 删除icon 使用自定义icon
    delete attrs.icon
    const butonAttrs = {
      attrs: attrs,
      on: {
        ...this.$listeners
      },
      props: {
        type: ''
      }
    }
    switch (this.$props.type) {
      case 'primary':
        butonAttrs.props.type = 'primary'
        break
      case 'link':
        butonAttrs.props.type = 'link'
        break
      default:
        butonAttrs.props.type = 'default'
        break
    }
    this.customClass = `y-button--${this.$props.type}`
    const renderIcon = () => {
      if (this.$props.icon) {
        return <a-icon type={this.$props.icon}></a-icon>
      }
    }
    return (
      <a-button class={`y-button ${this.customClass} ${this.$props.plain ? 'is-plain' : ''} ${this.$props.disabled ? 'is-disabled' : ''}`} {...butonAttrs}>
        {renderIcon()}
        {this.$slots.default}
      </a-button>
    )
  }
}
yButton.install = function (Vue) {
  Vue.component(yButton.name, yButton)
}
export default yButton
